<template>
  <div class="z-title">
    <span class="z-title-text">
      <slot></slot>
    </span>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'z-title'
})
</script>

<style lang="scss">
.z-title {
  position: relative;
  padding-left: 25px;
  padding-right: var(--z-page-padding);

  &::after {
    top: 50%;
    left: 14px;
    width: 3px;
    height: 14px;
    content: '';
    position: absolute;
    background-color: var(--z-main-color);
    transform: translateY(-50%);
  }

  &-text {
    color: var(--z-text-color-primary);
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
  }
}
</style>
